import React, { Component } from 'react'

// 类组件：有状态组件
export default class State extends Component {
  state = {
    x: 100,
    count: 0,
    list: [
      'a',
      'b'
    ]
  }

  // constructor() {
  //   super()
  //   this.state = {
  //     count: 0,
  //     list: [
  //       'a',
  //       'b'
  //     ]
  //   }
  // }

  handleClick() {
    // 用第一个参数和state做merge
    // this.setState({
    //   count: this.state.count + 1
    // })

    // 如果状态的修改依赖原状态的某个属性，需要拿到修改以后的新值
    // this.setState((prevState) => {
    //   return {
    //     count: prevState.count + 1
    //   }
    // })
    
  }

  handleAddClick() {
    this.state.list.push('c')

    // setState, 第二个参数是个回调函数，在DOM渲染完毕时执行
    this.setState({}, () => {
      console.log(document.querySelector('ul').innerHTML)
    })
  }

  render() {
    return (
      <div>
        {this.state.count}
        <button onClick={this.handleClick.bind(this)}>+</button>
        <ul>
          {this.state.list.map((v,i) => {
            return (
              <li key={i}>{v}</li>
            )
          })}
        </ul>
        <div><button onClick={this.handleAddClick.bind(this)}>add</button></div>

        <div>{this.state.x}</div>
      </div>
    )
  }
}
